<template>
    <div class="head">
        <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
        <div class="head_mid">购物车</div>
        <div class="head_right"></div>
    </div>
    <div v-if="show == false"><van-empty description="购物车为空" /></div>
    <div class="cart" v-if="show">
        <div class="shopping" v-for="(i, ind) in arr.result">
            <div class="shopping_left">
                <input type="checkbox" ref="inp" class="check" @click="ste(i.product_id, ind)" />
            </div>
            <div class="shopping_right" @click="go(i.product_id)">
                <van-swipe-cell>
                    <van-card :num="i.product_num" :price="i.product_price" :title="i.product_name" class="goods-card" :thumb="i.product_img" />
                    <template #right>
                        <van-button square text="删除" type="danger" class="delete-button" @click="del(i.product_id, ind)" />
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        <div class="foot">
            <div class="foot_price">
                <span class="price_symbol">¥</span>
                <span class="price">{{ price }}</span>
            </div>
            <div class="foot_buy">
                <button @click="clear">去结算</button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import { getCart, deleteCart } from "../../request/index.js";
import { useStore } from "vuex";
let store = useStore();
let router = useRouter();
let userid = ref("");
let inp = ref();
// let stete = ref("");
let show = ref("true");
let price = ref(0);
//保存点击后的信息,结算时使用
let myarr = reactive({ res: [] });
//保存是否点击,通过保存商品id来判断
let shop = reactive({ res: [] });
//商品列表渲染
let arr = reactive({ result: [] });

userid.value = localStorage.getItem("user_id");
if (userid.value == undefined) {
    show.value = false;
} else {
    getCart({ user_id: userid.value }).then((res) => {
        arr.result = res.data;
        if (arr.result.length == 0) {
            show.value = false;
        }
    });
}

let back = () => {
    router.go(-1);
};

let go = (x) => {
    router.push({ path: "/commoditydetails/" + x, query: { id: x } });
};
//删除购物车
let del = (id, ind) => {
    if (myarr.res.length != 0) {
        //删除保存的商品id记录
        for (let i = 0; i < shop.res.length; i++) {
            if (id == shop.res[i]) {
                shop.res.splice(i, 1);
            }
        }
        //重新计算总价格，保存商品和id对应得商品信息
        myarr.res = [];
        let tol = 0;
        for (let i = 0; i < shop.res.length; i++) {
            for (let j = 0; j < arr.result.length; j++) {
                if (arr.result[j].product_id == shop.res[i]) {
                    tol += arr.result[j].product_price * arr.result[j].product_num;
                    myarr.res.push(arr.result[j]);
                }
            }
        }
        price.value = tol;
        // document.querySelectorAll(".check")[i].checked = false;
    }
    deleteCart({ product_id: id, user_id: userid.value }).then((res) => {
        //删除后重新渲染
        getCart({ user_id: userid.value }).then((res) => {
            arr.result = res.data;
            //重新获取选中状态
            for (let i = 0; i < inp.value.length; i++) {
                inp.value[i].checked = false;
            }
            for (let j = 0; j < myarr.res.length; j++) {
                for (let k = 0; k < arr.result.length; k++) {
                    if (myarr.res[j].product_id == arr.result[k].product_id) {
                        inp.value[k].checked = true;
                    }
                }
            }
            if (arr.result.length == 0) {
                show.value = false;
            }
        });
    });
};
//结算
let clear = () => {
    if (myarr.res.length == 0) {
        return;
    } else {
        store.commit("myindex/changeArr", myarr.res);
        router.push({ path: "/clear" });
    }
};
let ste = (pid, ind) => {
    if (shop.res.length == 0) {
        //保存选中的商品id
        shop.res.push(pid);
        //直接计算价格
        price.value = arr.result[ind].product_price * arr.result[ind].product_num;
        //保存对应商品id的商品信息
        myarr.res.push(arr.result[ind]);
    } else {
        //判断是否重复
        let dd = shop.res.findIndex((item) => {
            return item == pid;
        });
        //不存在
        if (dd == -1) {
            myarr.res = [];
            shop.res.push(pid);
            let tol = 0;
            for (let i = 0; i < shop.res.length; i++) {
                for (let j = 0; j < arr.result.length; j++) {
                    console.log(arr.result[j].product_id);
                    if (arr.result[j].product_id == shop.res[i]) {
                        tol += arr.result[j].product_price * arr.result[j].product_num;
                        myarr.res.push(arr.result[j]);
                    }
                }
            }
            price.value = tol;
        } else {
            //存在，删除
            myarr.res = [];
            let inde = shop.res[dd];
            for (let i = 0; i < shop.res.length; i++) {
                // console.log(shop.res[i]);
                if (shop.res[i] == inde) {
                    shop.res.splice(i, 1);
                }
            }
            let tol = 0;
            for (let i = 0; i < shop.res.length; i++) {
                for (let j = 0; j < arr.result.length; j++) {
                    console.log(arr.result[j].product_id);
                    if (arr.result[j].product_id == shop.res[i]) {
                        tol += arr.result[j].product_price * arr.result[j].product_num;
                        myarr.res.push(arr.result[j]);
                    }
                }
            }
            price.value = tol;
        }
    }
};
</script>

<style lang="scss" scoped>
.van-card {
    padding: 0.625rem;
}
.van-card__price {
    color: #e5b8b8;
}
.goods-card {
    margin: 0;
    background-color: white;
}

.delete-button {
    height: 100%;
}
.head {
    box-shadow: 0 0 5px 1px #e5e5e5;
    height: 3.125rem;
    display: flex;
    margin-bottom: 1.25rem;
    .head_left {
        width: 1.875rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.25rem;
        color: #757575;
    }
    .head_mid {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.125rem;
        color: #757575;
    }
    .head_right {
        width: 1.875rem;
    }
}
.cart {
    margin-bottom: 7.5rem;
    padding: 0 0.75rem;
    .shopping {
        overflow: hidden;
        border: 1px solid #e5e5e5;
        border-radius: 0.75rem;
        margin: 0.625rem 0;
        display: flex;
        .shopping_left {
            width: 1.875rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .shopping_right {
            width: 1.875rem;
            flex: 1;
        }
    }

    .foot {
        border-top: 1px solid #e6e6e6;
        width: 100%;
        height: 2.8125rem;
        background-color: rgb(255, 255, 255);
        bottom: 3.375rem;
        left: 0;
        position: fixed;
        display: flex;
        .foot_price {
            flex: 1;
            color: #ff5154;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .price_symbol {
            font-size: 0.875rem;
            box-sizing: border-box;
            padding-top: 0.25rem;
        }
        .price {
            font-size: 1.25rem;
        }
        .foot_buy {
            flex: 1;
            display: flex;
            justify-content: end;
            button {
                background-color: #ff5154;
                color: white;
                width: 6.25rem;
            }
        }
    }
}
.cart_item {
    width: 100%;
    height: 6.25rem;
    margin-top: 0.9375rem;
    border-bottom: 1px solid #ccc;
    background-color: #ccc;
    display: flex;
    justify-content: space-between;
    // align-items: center;
    .select {
        width: 1.875rem;
        background-color: #e5b8b8;
    }
    .img {
        width: 5.625rem;
        height: 100%;
        background-color: pink;
    }
    .detail {
        width: 13.75rem;
        background-color: skyblue;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .detail_top {
            height: 40%;
        }
        .detail_bottom {
            height: 40%;
            display: flex;
            justify-content: space-between;
        }
    }
    .bottom_select {
        button {
            width: 24px;
            height: 24px;
        }
        input {
            text-align: center;
            padding: 0;
            height: 24px;
            width: 3.125rem;
            outline: none;
            border: none;
        }
    }
}
</style>
